<template>
  <el-dialog title="储值卡详情" :close-on-click-modal="false" :visible.sync="visible" fullscreen append-to-body center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <basic-container>
      <div class="avue-crud">
        <el-divider content-position="center">查询条件</el-divider>
        <el-form ref="dataForm">
          <el-row>
            <el-col :span="8">
              <el-form-item label="配镜单号" prop="billId">
                <el-input v-model="dataForm.billId" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="顾客姓名" prop="name">
                <el-input v-model="dataForm.name" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="累计储值" prop="changeMoney">
                <el-input v-model="dataForm.changeMoney" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="累计时间" prop="payTime">
                <el-input v-model="dataForm.payTime" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-divider content-position="center">配镜单商品列表详情</el-divider>
        <el-table :data="saleDetailDTOList" border v-loading="dataListLoading">
          <el-table-column prop="code" label="商品代码"></el-table-column>
          <el-table-column prop="goodsName" label="商品名称"></el-table-column>
          <el-table-column prop="price" label="单价"></el-table-column>
          <el-table-column prop="goodsQuantity" label="数量"></el-table-column>
          <el-table-column prop="originalPrice" label="原价合计"></el-table-column>
          <el-table-column prop="discountRate" label="折扣率"></el-table-column>
          <el-table-column prop="discountPrice" label="折扣金额"></el-table-column>
          <el-table-column prop="removePrice" label="抹零金额"></el-table-column>
          <el-table-column prop="receivablePrice" label="应收金额"></el-table-column>
          <el-table-column prop="goodsDescription" label="商品描述"></el-table-column>
        </el-table>
      </div>
    </basic-container>
  </el-dialog>
</template>

<script>
  import { getCreditCardDetailBySaleBillId } from "@/api/eims/customer.js"

  export default {
    data() {
      return {
        visible: false,
        deptData: {},
        dataForm: {},
        saleDetailDTOList: [],
        dataListLoading: false
      }
    },
    methods: {
      init(billId) {
        this.visible = true;
        this.dataListLoading = true;
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          getCreditCardDetailBySaleBillId(billId).then(response => {
            if(response.data.code == '0'){
              this.dataForm = response.data.data
              this.saleDetailDTOList = this.dataForm.saleDetailDTOList || {}
            }else{
              this.$message.error(response.data.msg)
            }
            this.dataListLoading = false;
          })
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .miui-table {
    width: 100%;
  }

  .miui-table tr>th,
  .miui-table tr>td {
    border: solid 1px #e7e7e7;
    background-color: #ecf5ff;
    padding: 3px 5px;
    text-align: center;
  }
</style>
